import SkeletonItem from '../SkeletonItem';
import { View } from '@tarojs/components';
import styles from '../style.scss';
import Card from '@/components/Card';

export default () => {
  return (
    <View className="skeleton_container">
      <Card className={styles.card}>
        <View className={styles.grid}>
          <SkeletonItem width={107} height={107} />
          <View className={styles.grid} style={{ flex: 1 }}>
            <SkeletonItem height={40} width={173} />
            <SkeletonItem height={40} style={{ width: '100%' }} />
          </View>
        </View>
      </Card>
      <Card className={styles.card}>
        <View className={styles.grid}>
          <SkeletonItem width={40} height={40} />
          <SkeletonItem height={40} style={{ flex: 1 }} />
        </View>
      </Card>
      <Card className={styles.card}>
        <View className={styles.grid}>
          <SkeletonItem width={224} height={40} />
          <View className={styles.grid}>
            <SkeletonItem height={147} style={{ flex: 1 }} />
            <SkeletonItem height={147} style={{ flex: 1 }} />
            <SkeletonItem height={147} style={{ flex: 1 }} />
          </View>
        </View>
      </Card>
      <Card className={styles.card}>
        <View className={styles.grid}>
          <SkeletonItem width={107} height={107} />
          <View className={styles.grid} style={{ flex: 1 }}>
            <SkeletonItem height={40} style={{ width: '100%' }} />
            <SkeletonItem height={40} style={{ width: '100%' }} />
          </View>
        </View>
      </Card>
      <Card className={styles.card}>
        <View className={styles.grid}>
          <View className={styles.grid} style={{ flex: 1 }}>
            <SkeletonItem width={107} height={107} />
            <View className={styles.grid} style={{ flex: 1 }}>
              <SkeletonItem height={40} style={{ width: '100%' }} />
              <SkeletonItem height={40} style={{ width: '100%' }} />
            </View>
          </View>
          <View className={styles.grid} style={{ flex: 1 }}>
            <SkeletonItem width={107} height={107} />
            <View className={styles.grid} style={{ flex: 1 }}>
              <SkeletonItem height={40} style={{ width: '100%' }} />
              <SkeletonItem height={40} style={{ width: '100%' }} />
            </View>
          </View>
        </View>
      </Card>
      <Card className={styles.card}>
        <View className={styles.grid}>
          <SkeletonItem width={107} height={107} />
          <View className={styles.grid} style={{ flex: 1 }}>
            <SkeletonItem height={40} style={{ width: '100%' }} />
            <SkeletonItem height={40} style={{ width: '100%' }} />
          </View>
        </View>
      </Card>
      <Card className={styles.card}>
        <View className={styles.grid}>
          <SkeletonItem width={224} height={40} />
          <View className={styles.entryGrid}>
            {Array.from(new Array(10)).map((_, index) => (
              <SkeletonItem
                key={index}
                height={107}
                style={{ width: '100%' }}
              />
            ))}
          </View>
        </View>
      </Card>
      <Card className={styles.card}>
        <View className={styles.grid}>
          <SkeletonItem width={224} height={40} />
          <View className={styles.entryGrid}>
            {Array.from(new Array(5)).map((_, index) => (
              <SkeletonItem
                key={index}
                height={107}
                style={{ width: '100%' }}
              />
            ))}
          </View>
        </View>
      </Card>
      <Card className={styles.card}>
        <View className={styles.grid}>
          <SkeletonItem width={224} height={40} />
          <View className={styles.entryGrid}>
            {Array.from(new Array(5)).map((_, index) => (
              <SkeletonItem
                key={index}
                height={107}
                style={{ width: '100%' }}
              />
            ))}
          </View>
        </View>
      </Card>
    </View>
  );
};
